<template>
    <div>
        <h2>Home</h2>
        {{ route.params.id }}
        <hr>
        {{ route.query }}
        <hr>
        {{ route.hash }}

    </div>
</template>
<script setup>
import { watch } from 'vue';
import { useRoute, onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';

onBeforeRouteUpdate((to, from, next) => {
    console.log("onBeforeRouteUpdate");
    next();
})
onBeforeRouteLeave((to, from, next) => {
    console.log("onBeforeRouteLeave");
    next();
})



// $route 无法在setup中使用，如果获取路径参数可以使用useRoute
const route = useRoute();//$route

// watch(() => route.query, (a, b) => {
//     console.log(a);
//     console.log(b);
// });
watch(() => route.params, (a, b) => {
    console.log(a);
    console.log(b);
});
</script>